<template>
    <div class="lx_login">
        <!-- 导航栏 -->
        <div class="lx_nav">
            <div class="lx_nav_left"><van-icon name="arrow-left" size="23" onclick="history.back()" /></div>
            <div class="lx_nav_right">注册</div>
        </div>
        <!-- 文字 -->
        <div class="lx_text">
            <div class="lx_text_title">注册账户</div>
            <div style="text-align: center; color:#b0b0ba">输入电子邮件和密码进行注册</div>
        </div>
        <!-- 表单 -->
        <div class="lx_form">
            <div class="lx_phone">
                <div style="margin-top: 5px">
                    <van-cell-group inset>
                        <van-field v-model="phone" center clearable label="手机号" placeholder="手机号"
                            :class="{ 'focused': isFocused }" @focus="handleFocus" @blur="handleBlur"></van-field>
                    </van-cell-group>
                </div>
            </div>

            <div class="lx_phones">
                <div style="margin-top: 5px">
                    <van-cell-group inset>
                        <van-field v-model="username" center clearable label="用户名" placeholder="请输入用户名"
                            :class="{ 'focused': isNameFocused }" @focus="handleNmaeFocus" @blur="handleNameBlur"></van-field>
                    </van-cell-group>
                </div>
            </div>

            <div class="lx_sms">

                <div style="margin-top: 8px;margin-left:15px">
                    <van-field v-model="password" type="password" label="密码" :class="{ 'focused': isSmsFocused }"
                        @focus="handleSmsFocus" @blur="handleSmsBlur" placeholder="请输入密码" />
                </div>

            </div>

            <div class="lx_sms">

                <div style="margin-top: 8px;margin-left:15px">
                    <van-field v-model="confirmPassword" type="password" label="确认密码" :class="{ 'focused': isPwdFocused }"
                        @focus="handlePwdFocus" @blur="handlePwdBlur" placeholder="重新输入您的密码" />
                </div>
                <p v-if="passwordsDoNotMatch" style="color: red;">两次输入的密码不一致</p>

            </div>
        </div>
        <!-- 登录按钮 -->
        <div class="lx_login_btn" @click="register">
            <p>注册</p>
        </div>



        <!-- 没有账户？立即注册 -->
        <div class="lx_register">
            <p>点击注册，表示您同意我们的条款和条件</p>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from 'vue';
import { Icon as VanIcon, CellGroup as VanCellGroup, Field as VanField, Button as VanButton } from 'vant';
import axios from 'axios'
import router from '@/router';
import { showSuccessToast, showFailToast } from 'vant';


// 定义表单数据
const username = ref('');
const password = ref('')
const passwordsDoNotMatch = ref(false);
const confirmPassword = ref('');
const phone=ref('')

// icon跳转
const toEmailLogin = () => {
    router.push('/emaillogin')
}


const toUserLogin = () => {
    router.push('/userlogin')
}

// 控制文本颜色的响应式变量
const isFocused = ref(false);
// 控制文本颜色的响应式变量
const isPhoneFocused = ref(false);
const isSmsFocused = ref(false);
const isPwdFocused=ref(false)
const isNameFocused=ref(false)
// 处理聚焦事件
const handleFocus = () => {
    isFocused.value = true;
};

// 处理失焦事件
const handleBlur = () => {
    isFocused.value = false;
};

// 处理短信验证码输入框的聚焦事件
const handleSmsFocus = () => {
    isSmsFocused.value = true;
};

// 处理短信验证码输入框的失焦事件
const handleSmsBlur = () => {
    isSmsFocused.value = false;
};

const handlePwdBlur=()=>{
    isPwdFocused.value=false;
}

const handlePwdFocus=()=>{
    isPwdFocused.value=true;
}

const handleNameBlur=()=>{
    isNameFocused.value=false;
}

const handleNmaeFocus=()=>{
    isNameFocused.value=true;
}

const validatePasswords = () => {
  if (password.value !== confirmPassword.value) {
    passwordsDoNotMatch.value = true;
    // console.log(11111);
    
  } else {
    passwordsDoNotMatch.value = false;
    console.log("两次密码不一样");
    
  }
}

// 加载状态
const loading = ref(false);

// 注册账号
const register = async () => {
  // 基本表单验证
  if (!username.value) {
    showFailToast('请注册用户名');
    return;
  }
  if (!phone.value) {
    showFailToast('请注册电话号码');
    return;
  }
  if (!password.value) {
    showFailToast('请输入密码');
    return;
  }
  if (password.value !== confirmPassword.value) {
    showFailToast('两次输入的密码不一致');
    return;
  }
  try {
    loading.value = true; // 显示加载指示器
    const response = await axios.post('http://127.0.0.1:3000/lx/register', {
      phone: phone.value,
      username: username.value,
      password: password.value
    });

    if (response.data.code === 200) {
      showSuccessToast('注册成功');
      router.push('/userlogin');
    } else {
      showFailToast('注册失败');
    }
  } catch (error) {
    console.error('注册失败:', error);
    showFailToast('注册失败，请稍后再试');
  } finally {
    loading.value = false; // 隐藏加载指示器
  }
};

</script>

<style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.lx_login {
    width: 100vw;
    height: 100vh;

}

.lx_nav {
    width: 100%;
    height: 50px;
    display: flex;
    border-bottom: 1px solid #ccc;
}

.lx_nav_left {
    width: 50px;
    height: 30px;
    margin-left: 30px;
    margin-top: 14px;
}


.lx_nav_right {
    width: 310Px;
    height: 50px;
    font-size: 18px;
    margin-left: 120px;
    line-height: 50px;
}

.lx_text {
    width: 100%;
    height: 50px;
    margin-top: 50px;
    /* background: pink; */
}


.lx_text_title {
    font-size: 25px;
    text-align: center;
    line-height: 50px;
}

.lx_form {
    width: 100%;
    height: 340px;
    overflow: hidden;
    margin-top: 50px;
    background: #fff;
}

.lx_phone {
    width: 100%;
    height: 55px;
    margin-top: 50px;
    border: 1px solid #ccc;
    border-radius: 50px;
}

.lx_phones{
    width: 100%;
    height: 55px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 50px;
}

.lx_sms {
    width: 100%;
    height: 60px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 50px;
}

.lx_phone .van-cell-group,
.lx_sms .van-cell-group {
    background: #f9f9f9;
}

.van-field {
    background: #ffffff;
}

.van-field.focused .van-cell__title,
.van-field.focused .van-cell__value,
.van-field.focused .van-field__control {
    color: #00be8c !important;
}

.van-button {
    background: #00be8c;
    color: white;
}

.van-field.focused .van-cell__title,
.van-field.focused .van-cell__value,
.van-field.focused .van-field__control {
    color: #00be8c !important;
}

.lx_remember {
    width: 100%;
    height: 50px;
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
}

.lx_remeber_pwd {
    width: 100px;
    height: 50px;
    line-height: 50px;
}

.lx_regist_pwd {
    width: 220px;
    height: 50px;
    text-align: right;
    line-height: 50px;
    color: #cecece;
}

.lx_login_btn {
    width: 95%;
    height: 50px;
    background: #00be8c;
    margin-left: 10px;
    margin-top: 20px;
    border-radius: 8px;
}

.lx_login_btn p {
    text-align: center;
    line-height: 50px;
    color: #fff;
}

.lx_other_login {
    width: 100%;
    height: 50px;
    /* background: palegreen; */
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
}

.lx_other {
    width: 60px;
    height: 50px
}

.lx_register {
    width: 100%;
    height: 50px;
    margin-top: 20px;
    text-align: center;
    line-height: 50px;
    color: #989898;
}

</style>